<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="automatic"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 设置 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-3 p-4">
        <view
          class="flex justify-between px-5 py-3 rounded-[.5rem] bg-white"
          @click="vk.navigateTo('/pages/my/secure')"
        >
          <view class="text-[.875rem] text-[#161A24]">账户安全 </view>
          <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
        </view>
        <view
          class="flex justify-between px-5 py-3 rounded-[.5rem] bg-white"
          @click="vk.navigateTo('/pages/my/blacklist')"
        >
          <view class="text-[.875rem] text-[#161A24]">黑名单 </view>
          <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
        </view>
        <!--  -->
        <view class="rounded-[.5rem] bg-white">
          <view class="flex justify-between px-5 py-3" @click="vk.navigateTo('/pages/my/problem')">
            <view class="text-[.875rem] text-[#161A24]">常见问题 </view>
            <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
          </view>
          <view class="flex justify-between px-5 py-3" @click="vk.navigateTo('/pages/my/feedback')">
            <view class="text-[.875rem] text-[#161A24]">意见反馈 </view>
            <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
          </view>
          <view class="flex justify-between px-5 py-3" @click="shareApp">
            <view class="text-[.875rem] text-[#161A24]">分享APP </view>
            <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
          </view>
        </view>
        <!--  -->
        <view class="rounded-[.5rem] bg-white">
          <view class="flex justify-between px-5 py-3" @click="currentVersion">
            <view class="text-[.875rem] text-[#161A24]">当前版本 </view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499]">
                {{ vk.getConfig().versionName || '' }}
              </view>
              <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
            </view>
          </view>
          <view class="flex justify-between px-5 py-3" @click="clearCache">
            <view class="text-[.875rem] text-[#161A24]">清除缓存 </view>
            <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
          </view>
        </view>

        <view
          class="flex justify-between px-5 py-3 rounded-[.5rem] bg-white"
          @click="vk.navigateTo('/pages/my/aboutUs')"
        >
          <view class="text-[.875rem] text-[#161A24]">关于我们 </view>
          <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
        </view>
      </view>
      <template #bottom>
        <view class="pb-env">
          <view class="px-4 py-3">
            <view class="flex justify-center">
              <view
                class="h-[2.75rem] bg-[#FFFFFF] w-full rounded-full flex items-center justify-center btn"
                @click="logOut"
              >
                <text class="text-[1rem] text-[#C0C4CC]">退出登录</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </yy-paging>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        loading: false // 加载状态
      }
    },

    methods: {
      shareApp() {
        vk.myfn.shareWithSystem()
      },
      currentVersion() {
        vk.toast('你当前已是最新版本', 'none')
      },
      async alertConfirm(eventType) {
        switch (eventType) {
          case 'logout':
            vk.showLoading('退出中...')
            api.logout().then(result => {
              vk.hideLoading()
              vk.myfn.logout()
            })
            break
          case 'clearCache':
            this.clearcacheEvent()
            break
          default:
            break
        }
      },
      async clearcacheEvent() {
        try {
          // 显示加载提示
          uni.showLoading({
            title: '清理中...'
          })
          // 清理本地存储
          // uni.clearStorageSync()
          // 清理图片缓存（如果使用了图片缓存）
          // #ifdef APP-PLUS
          if (plus && plus.cache) {
            plus.cache.clear(() => {
              console.log('缓存清理成功')
            })
          }
          // #endif
          // 清理网络请求缓存
          if (uni.clearCache) {
            uni.clearCache()
          }
          // 模拟清理过程
          await new Promise(resolve => setTimeout(resolve, 1000))
          uni.hideLoading()
          // 显示成功提示
          vk.toast('缓存清理成功', 200, () => {
            // 可选：清理完成后重启应用或刷新页面
            // uni.reLaunch({
            //   url: '/pages/index/index'
            // })
          })
        } catch (error) {
          uni.hideLoading()
          vk.toast('清理失败，请重试', 'error')
          console.error('清理缓存失败:', error)
        }
      },

      clearCache() {
        this.$refs.alert.config({
          show: true,
          title: '清除缓存',
          describe: '确定要清除缓存吗？清除缓存后，部分数据需要重新加载，是否确定清除？',
          cancel: '再想想',
          cancelColor: '#000',
          confirm: '确定清除',
          confirmColor: '#FF3A56',
          eventType: 'clearCache'
        })
      },
      logOut() {
        this.$refs.alert.config({
          show: true,
          title: '退出登录',
          describe: '确定要退出登录吗？退出后需要重新登录才能使用完整功能。',
          cancel: '再想想',
          cancelColor: '#000',
          confirm: '确定退出',
          confirmColor: '#FF3A56',
          eventType: 'logout'
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
